<template>
	<view class="welcome">
		<view class="row row-ai">
			<view class="message">
				<view class="avatar">
					<img src="/static/img/ic_ai.png">
				</view>
				<view class="text markdown-body" style="padding: 30rpx 50rpx;">
					<view class="title" v-if="welcomeTitle">{{ welcomeTitle }}</view>
					<view class="desc" v-if="welcomeDesc" v-html="welcomeDesc"></view>
					<view class="tips" v-if="welcomeTips.length > 0">
						<ul>
							<li v-for="item in welcomeTips" @click="quickMessage(item)" v-if="item">
								<image class="icon" src="/static/images/ic_chat_list.png"></image>
								<text>{{ item }}</text>
							</li>
						</ul>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			module: {
				type: String,
				default: 'chat'
			},
			hasModel4: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			tips: {
				type: String,
				default: ''
			}
		},
		computed: {
			welcomeTitle() {
				if (!this.title) {
					return ''
				}
				if (this.module === 'chat') {
					return this.$lang('你好！我是') + this.title
				} else if (this.module === 'cosplay') {
					return this.$lang('我是') + this.title
				}
				return this.title;
			},
			welcomeDesc() {
				if (this.desc) {
					return this.desc.replaceAll("\n", "<br>")
				} else {
					if (this.module === 'cosplay') {
						return this.$lang('请输入你的问题')
					}
				}
				return ''
			},
			welcomeTips() {
				if (this.tips) {
					return this.tips.split("\n")
				} else {
					return []
				}
			}
		},
		methods: {
			quickMessage(text) {
				this.$emit('use', text)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.welcome {
		.message {
			display: flex;
			justify-content: flex-start;
			padding: 40rpx 30rpx;
		}

		.message:last-child {
			border-bottom: 0;
		}

		.message .text {
			width: 600rpx;
			color: #1c1b1b;
			overflow: hidden;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 4rpx 30rpx 30rpx 30rpx;
		}

		.message .text span {
			display: inline;
		}

		.message .avatar {
			width: 58rpx;
			height: 58rpx;
			background: none;
			margin-right: 24rpx;
			color: #fff;
			font-size: 28rpx;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 6rpx;
			overflow: hidden;
		}

		.message .avatar image,
		.message .avatar img {
			width: 58rpx;
			height: 58rpx;
		}

		.markdown-body view {
			display: block;
		}

		.title {
			color: #1b1c1c;
			font-size: 36rpx;
			font-weight: 600;
			letter-spacing: 2rpx;
			line-height: 64rpx;
			transition: color 0.1s ease-in-out;
		}

		.desc {
			margin: 10rpx 0 !important;
			font-size: 26rpx;
			line-height: 44rpx;
			word-break: break-all;
			width: 100%;
			float: left;
		}

		.tips {
			padding: 0 0 20rpx 0;
			width: 100%;
			float: left;

			ul,
			li {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			li {
				background: #f0fafa;
				border-radius: 40rpx;
				margin-top: 24rpx;
				padding: 16rpx 30rpx 20rpx 30rpx;
				transition: background 0.1s ease-in-out;
				display: flex;
				align-items: flex-start;
				overflow: hidden;

				&:hover,
				&:active {
					background: #f2f2f2;
					color: #222;
				}
				.icon {
					width: 26rpx;
					height: 26rpx;
					min-width: 26rpx;
					margin-right: 16rpx;
					margin-top: 4px;
				}
				text {
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1b1c1c;
				}
			}
		}
	}
</style>